<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        <title>
            我的信息
        </title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    
        </script>
        <!-- 引入 layui.css -->
    <link href="./css/layui.css" rel="stylesheet" />

    <!-- 引入 layui.js -->
    <script src="./js/layui.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/constant.js" ></script>
    <script src="./js/data.js"></script>
    <script src="./js/userAuth.js"></script>
    <script src="./js/request.js"></script>
    <script type="text/javascript">    

        var responseData = null ;

        function loadData(){
            $.ajax({
                url : REQUEST_URL,
                method :"post",
                data:JSON.stringify({action : "GetCustomerInfo"}),
                contentType :"application/json",
                headers:REQUEST_HEADERS(),
                success:function(r,t,x){
                    const res = responseHandler(r,t,x);
                    if(res.code == 200){
                        responseData = res ;
                        render(res)
                    }
                }
            })
        }
        function render(data){
            const {username,mobilephone,companyname,sfzh,isactivate,headimgurl,ZXLX} = data.list[0].Rows[0]
            $("#name").text(username);
            $("#isActive").text(isactivate ? "是":"否");
            $("#mobile").text(mobilephone);
            $("#companyName").text(companyname);
            $("#type").text(ZXLX);

        }

        function zhuxiao(callback){
           
            
            $.ajax({
                url :REQUEST_URL,
                method:"post",
                contentType : "application/json",
                data: JSON.stringify({action :"UserCancel",phoneNumber:responseData.list[0].Rows[0].mobilephone}),
                headers:REQUEST_HEADERS(),
                success:function(r,t,x){
                    if(r.code == 200){
                        callback()
                    }else{
                        layer.msg(r.message);
                    }
                    
                }
            })
        }

        function tuichu(callback){
     
            $.ajax({
                url  :REQUEST_URL,
                data: JSON.stringify({action : "CancelBindUser",phoneNumber:responseData.list[0].Rows[0].mobilephone}),
                contentType:"application/json",
                type :"json",
                method:"post",
                headers:REQUEST_HEADERS(),
                success:function(r,t,x){
                    console.log(r)
                    const res = responseHandler(r,t,x);
                    if(res.code == 200){
                        layer.msg(res.message+"(两秒后自动跳转到首页)");
                        setTimeout(() => {
                            callback ? callback():null ;
                            setLoginStatus(false);
                            location.replace(INDEX_PAGE);
                        }, 2000);
                    }
                }
            })
        }

        function onClickDelete(){
            layer.confirm("您是否确认进行注销账号操作吗？此操作一经操作无法撤销",
            {btn:["确认","取消"]},
            function(index){
                console.log('onclcik yes',index)
                zhuxiao(function(){
                    layer.msg("注销成功，2秒后跳转至首页");
                    setTimeout(() => {
                        layer.close(index);
                        localStorage.clear()
                        location.replace(INDEX_PAGE)    
                    }, 2000);
                    
                })
            },
            function(index){
                console.log('onclick cancel',index)
            }
            )
        }
        function onClickLogout(){
            layer.confirm("您是否确认退出登录",{
                title : "退出提示",
                icon : 3},
                function(index){
                    console.log('confirm ',index)
                    tuichu()
                },
                function(index){
                    console.log('cancel',index)
                }
            )
        }

        function clickBack(){
            history.back()
        }
        $(document).ready(()=>{
            init();
            loadData();
        })
    </script>
    <style>
        body {
            background-color: rgb(244, 244, 244);
        }
        .item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: white;
            border-bottom: 1px solid rgb(244, 244, 244);
        }
        .value {
            color: gray;
        }
        .btn {
            display: flex;
            flex: 1;
            height: 44px;
            line-height: 44p;
            text-align: center;
            border: 1px solid rgb(229,86,77);
            border-radius: 22px;
            align-items: center;
            justify-content: center;
        }
        .zx {
            background-color: white;
            color: rgb(229,86,77);
        }
        .tc {
            background-color: rgb(229,86,77);
            color: white;
        }
        .fh {
            background-color: rgb(229,86,77);
            color: white;
        }
    </style>
    </head>
    <body>

        <!-- logo图 -->
        <div style="padding: 20px;background-color: white;">
        <img  src="./static/tongkun_logo.png" style="width: 100%;"/>
        </div>

        <!-- 表单数据 -->
        <div style="margin-top: 20px">
            <div class="item">
                <div>
                    用户姓名
                </div>
                <div id="name" class="value">
                    
                </div>
            </div>
            <div class="item">
                <div>
                    是否激活
                </div>
                <div id="isActive"class="value">
                    
                </div>
            </div>
            <div class="item">
                <div>
                    联系电话
                </div>
                <div id="mobile" class="value">
                    
                </div>
            </div>
            <div class="item">
                <div>
                    公司名称
                </div>
                <div id="companyName" class="value">
                    
                </div>
            </div>
            <div class="item">
                <div>
                    账户类型
                </div>
                <div id="type"  class="value">
                    
                </div>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div style="margin-top: 20px;padding: 0px 20px;">  
            <div style="display: flex">
                <div class="btn zx" onclick="onClickDelete()">
                    注销账户
                </div>
                <div style="width: 20px;"></div>
                <div class="btn tc" onclick="onClickLogout()">
                    退出登录
                </div>
            </div>
            <div onclick="clickBack()" class="btn fh" style="margin-top: 20px">
                返回
            </div>
        </div>
    </body>
</html>